import { defaultPredefineColors } from '@/config'

export interface layoutTypeStore {
  theme: {
    primary: string
    isDark: boolean
    isTopNav: boolean
    navPath: string
    menu_theme: 'theme-dark' | 'theme-light'
    predefineColors: Array<string>
  }
}

export const useLayoutStore = defineStore('layout', {
  // other options...
  state: (): layoutTypeStore => {
    return {
      theme: {
        primary: '#409eff',
        isDark: false,
        isTopNav: false,
        navPath: '/',
        menu_theme: 'theme-dark',
        predefineColors: [...defaultPredefineColors]
      }
    }
  },
  actions: {
    SETNAVPATH(path: string) {
      const arr = path.split('/').filter(item => item !== '')
      this.theme.navPath = arr.length ? `/${arr[0]}` : '/'
    },
    SETDARK(dark: boolean) {
      this.theme.isDark = dark
    },
    SETCOLOR(color: string) {
      this.theme.primary = color
        ? color
        : getComputedStyle(document.documentElement).getPropertyValue('--el-color-primary').trim()
    },
    SETMENURHEME(color: 'theme-dark' | 'theme-light') {
      this.theme.menu_theme = color
    },
    ADDTHEMECOLORLIST(color: string) {
      if (!color) {
        this.theme.predefineColors = [...defaultPredefineColors]
        return
      }
      if (this.theme.predefineColors.length >= 20) {
        ElMessage({
          showClose: true,
          message: '添加的颜色不可超过20个',
          type: 'error'
        })
        return
      }
      const isHave = this.theme.predefineColors.some(
        item => item.toLowerCase() === color.toLowerCase()
      )
      if (!isHave) {
        this.theme.predefineColors.push(color)
      }
    }
  },
  getters: {},
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'Layout',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
    paths: ['theme']
  }
})
